<template>
    <view class="wuliu">
        <view class="search-header">
            <view @click="handeleTo">
                <image style="width: 15rpx;height: 30rpx;" src="@/static/index2/index7.png" mode=""></image>
            </view>
            <view style="color: #FFFFFF;font-size: 32rpx;margin-right: 10rpx;">{{ title }}</view>
            <view></view>
        </view>
        <view class="wuliuContent">
            <CheckGoods @select_goods="select_goods"></CheckGoods>
            <view class="entry-block">
                <view class="new-block1">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode=""></image>
                        <view>{{ $t('出发国家') }}</view>
                    </view>

                    <view style="display: flex;align-items: center;">
                        <CountrySelect @change="countryChangeStart" :text="model.departure_country || $t('请选择出发国家')" />
                    </view>
                </view>
                <view class="new-block1">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode=""></image>
                        <view>{{ $t('出发城市') }}</view>
                    </view>
                    <CitySelect :text="model.departure_city_name || $t('请选择出发城市')" @confirm="citySelectCbStart" />
                </view>
                <view class="new-block1">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode=""></image>
                        <view>{{ $t('具体位置') }}</view>
                    </view>
                    <u-input :placeholder="$t('请输入具体位置')" style="margin-left: 50rpx;"
                        placeholder-style="font-size: 24rpx;color: #999999;" input-align="right"
                        v-model="model.departure_address"></u-input>
                </view>
                <view class="new-block1">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode=""></image>
                        <view>{{ $t('到达国家') }}</view>
                    </view>
                    <view style="display: flex;align-items: center;">
                        <CountrySelect @change="countryChangeEnd" :text="model.reach_country || $t('请选择到达国家')" />
                    </view>
                </view>
                <view class="new-block1">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode=""></image>
                        <view>{{ $t('到达城市') }}</view>
                    </view>
                    <CitySelect :text="model.reach_city_name || $t('请选择到达城市')" @confirm="citySelectCbEnd" />
                </view>
                <view class="new-block1">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode=""></image>
                        <view>{{ $t('具体位置') }}</view>
                    </view>
                    <u-input :placeholder="$t('请输入具体位置')" style="margin-left: 50rpx;"
                        placeholder-style="font-size: 24rpx;color: #999999;" input-align="right"
                        v-model="model.reach_address"></u-input>
                </view>
                <view class="new-block1">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode="">
                        </image>
                        <view>{{ $t('货物名称') }}</view>
                    </view>
                    <u-input :placeholder="$t('请输入商品名称')" style="margin-left: 50rpx;"
                        placeholder-style="font-size: 24rpx;color: #999999;" input-align="right"
                        v-model="model.goods_name"></u-input>
                </view>
                <view class="new-block1">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode="">
                        </image>
                        <view>{{ $t('数量') }}</view>
                    </view>
                    <u-input :placeholder="$t('请输入商品数量')" style="margin-left: 50rpx;"
                        placeholder-style="font-size: 24rpx;color: #999999;" input-align="right"
                        v-model="model.goods_num"></u-input>
                </view>
                <view class="new-block1">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode="">
                        </image>
                        <view>{{ $t('数量单位') }}</view>
                    </view>
                    <view style="display: flex;align-items: center;" @click="handeleGoodsClass(4)">
                        <view style="color: #999999;">{{ model.number_unit || $t('请选择数量单位') }}</view>
                        <image style="width: 32rpx;height: 32rpx;margin-left: 16rpx;" src="@/static/index2/index14.png"
                            mode="">
                        </image>
                    </view>
                </view>
                <view class="new-block1">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode="">
                        </image>
                        <view>{{ $t('总重量（kg)') }}</view>
                    </view>
                    <u-input :placeholder="$t('请输入商品总重量')" style="margin-left: 50rpx;"
                        placeholder-style="font-size: 24rpx;color: #999999;" input-align="right"
                        v-model="model.goods_weight"></u-input>
                </view>
                <view class="new-block1">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode="">
                        </image>
                        <view>{{ $t('总体积（m³)') }}</view>
                    </view>
                    <u-input :placeholder="$t('请输入商品总体积')" style="margin-left: 50rpx;"
                        placeholder-style="font-size: 24rpx;color: #999999;" input-align="right"
                        v-model="model.goods_volume"></u-input>
                </view>
                <view class="new-block1">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode="">
                        </image>
                        <view>{{ $t('单件尺寸（m)') }}</view>
                    </view>
                    <u-input :placeholder="$t('长*宽*高')" style="margin-left: 50rpx;"
                        placeholder-style="font-size: 24rpx;color: #999999;" input-align="right"
                        v-model="model.goods_size"></u-input>
                </view>
                <view class="new-block1">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode="">
                        </image>
                        <view>{{ $t('运输方式') }}</view>
                    </view>
                    <view style="display: flex;align-items: center;">
                        <TransportSelect :text="model.mode || $t('请选择运输方式')" :id="model.release_transport"
                            @change="handeleTransport" />
                    </view>
                </view>
                <view class="new-block1">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode="">
                        </image>
                        <view>{{ $t('车型') }}</view>
                    </view>
                    <view style="display: flex;align-items: center;">
                        <CarTypeSelect :text="$t('请选择车型')" :value="model.car_category_id" :id="model.release_transport"
                            @change="handeleCarType" />
                    </view>
                </view>
                <view class="new-block1">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode="">
                        </image>
                        <view>{{ $t('整车/散货') }}</view>
                    </view>
                    <view style="display: flex;align-items: center;">
                        <WholeSelect :text="model.whole_diffuse || $t('请选择')" @change="handeleWhole" />
                    </view>
                </view>
                <view class="new-block1">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode="">
                        </image>
                        <view>{{ $t('期望速度（天)') }}</view>
                    </view>
                    <u-input :placeholder="$t('请输入期望速度')" style="margin-left: 50rpx;"
                        placeholder-style="font-size: 24rpx;color: #999999;" input-align="right"
                        v-model="model.desire_speed"></u-input>
                </view>
                <view class="new-block1">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode=""></image>
                        <view>{{ $t('价格单位') }}</view>
                    </view>
                    <view style="display: flex;align-items: center;" @click="handeleGoodsClass(3)">
                        <view style="color: #999999;">{{ model.price_unit || $t('请选择货币类型') }}</view>
                        <image style="width: 32rpx;height: 32rpx;margin-left: 16rpx;" src="@/static/index2/index14.png"
                            mode=""></image>
                    </view>
                </view>
                <view class="new-block1">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode="">
                        </image>
                        <view>{{ $t('运费总价') }}</view>
                    </view>
                    <u-input :placeholder="$t('请输入运费总价')" style="margin-left: 50rpx;"
                        placeholder-style="font-size: 24rpx;color: #999999;" input-align="right"
                        v-model="model.freight_price"></u-input>
                </view>
                <view class="new-block1">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode="">
                        </image>
                        <view>{{ $t('发货时间') }}</view>
                    </view>
                    <picker mode="date" :value="date" @change="bindDateChange">
                        <view style="font-size: 24rpx;color: #999999;">{{ model.give_install_date || $t('请选择发货时间') }}
                        </view>
                    </picker>
                </view>
                <view class="new-block1">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode="">
                        </image>
                        <view>{{ $t('是否缴纳保证金') }}</view>
                    </view>
                    <u-switch v-model="model.is_margin" size="40" active-color="#06C36E"></u-switch>
                </view>
                <view class="new-block1">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode="">
                        </image>
                        <view>{{ $t('是否发布置顶推广') }}</view>
                    </view>
                    <u-switch v-model="model.is_topping" size="40" active-color="#06C36E"></u-switch>
                </view>
                <view class="new-block2 u-margin-top-10">
                    <view style="display: flex;align-items: center;">
                        <image style="width: 11rpx;height: 11rpx;margin-right: 6rpx;" src="@/static/index2/index11.png"
                            mode=""></image>
                        <view>{{ $t('商品介绍') }}</view>
                    </view>
                    <u-input type="textarea" :placeholder="$t('请输入商品介绍')"
                        style="background: #F6F7FB;border-radius: 15rpx;padding: 10rpx 20rpx;margin-top: 20rpx;min-height:300rpx;"
                        placeholder-style="font-size: 24rpx;color: #999999;" v-model="model.content"></u-input>
                </view>
                <view class="new-block2">
                    <view style="width: 100%;height: 60rpx;line-height: 60rpx;">{{ $t('入库商品图(最多3张)') }}</view>
                    <!-- image  video-->
                    <fileUploadVue :detail="false" :files.sync="model.images" :max-count="3" file-type="image" />
                </view>
            </view>
            <view class="addCk">
                <view class="addCk-but" @click="submit">{{ $t('确认竞标') }}</view>
            </view>
        </view>
        <!-- 货币类型 -->
        <u-picker @confirm="(event) => handeleConfirm(event, 3)" mode="selector" v-model="showCurrency"
            :default-selector="[0]" :range="currencyTypes" :confirm-text="$t('确定')" :cancel-text="$t('取消')"
            :range-key="lang == 'zh' ? 'name' : 'name_ru'" />
        <u-picker @confirm="(event) => handeleConfirm(event, 4)" mode="selector" v-model="showUnits"
            :default-selector="[0]" :range="quantityUnits" :confirm-text="$t('确定')" :cancel-text="$t('取消')"
            :range-key="lang == 'zh' ? 'name' : 'name_ru'" />
        <!-- 顶部背景色 -->
        <image style="width: 750rpx;height: 690rpx;position: absolute;top: 0;z-index: 1;"
            src="@/static/index2/20241101130857.png" mode=""></image>

        <!-- 俄罗斯分享弹窗 -->
        <u-mask :show="mask" v-if="lang == 'ru'" @click="mask = false">
            <view class="mask">
                <view style="text-align: center;">Публикуйте ссылку бесплатно</view>
                <view>www.gluz.com.cn</view>
                <view class="fz" @click="cation">скопирова</view>
            </view>
        </u-mask>
    </view>
</template>

<script>
import CheckGoods from './CheckGoods'
import fileUploadVue from '../components/fileUpload.vue'
import CitySelect from '../components/citySelect.vue'
import dayjs from 'dayjs';
import CountrySelect from '../components/countrySelect.vue'
import TransportSelect from '../components/transportTypeSelect.vue'
import CarTypeSelect from '../components/carTypeSelect.vue'
import WholeSelect from '../components/wholeSelect.vue'
import { pay } from '@/utils/pay'
export default {
    components: {
        CheckGoods,
        fileUploadVue,
        CitySelect,
        CountrySelect,
        TransportSelect,
        CarTypeSelect,
        WholeSelect
    },
    data () {
        return {
            title: this.$t('物流运输'),
            subDisabled: false,
            currencyTypes: [{
                name: '元',
                name_ru: 'Юань'
            },
            {
                name: '卢布',
                name_ru: 'Руб.'
            },
            ],
            quantityUnits: [], //数量单位
            showUnits: false,
            showCurrency: false,
            date: dayjs().format('yyyy-MM-DD'),


            model: {
                images: [],
                departure_country: null, //必填
                reach_country: null, //必填
                departure_address: '',//必填
                departure_city: null,//必填
                departure_city_name: null,//提交时删除
                reach_city: null,//必填
                reach_city_name: null,//提交时删除
                mode: null,//必填
                release_transport: '',
                car_category_id: '',
                whole_diffuse: null,//必填
                price_unit: null,//必填
                reach_address: '',//必填
                number_unit: null,//必填
                goods_weight: '',//必填
                goods_num: '',//必填
                goods_volume: '',//必填
                goods_size: '',//必填
                desire_speed: '',//必填
                freight_price: '',//必填
                give_install_date: null,//必填
                //是否置顶
                is_topping: true,
                //是否缴纳保证金
                is_margin: true,
                content: '', //必填
            },
            lang: '',
            getRuss: false,
            mask: false,
            //必填项
            required: [
                { key: 'departure_country', text: this.$t('请选择出发国家') },
                { key: 'departure_city', text: this.$t('请选择出发城市') },
                { key: 'departure_address', text: this.$t('请输入出发地址') },
                { key: 'reach_country', text: this.$t('请选择到达国家') },
                { key: 'reach_city', text: this.$t('请选择到达城市') },
                { key: 'reach_address', text: this.$t('请输入到达地址') },
                { key: 'goods_name', text: this.$t('请输入商品名称') },
                { key: 'goods_num', text: this.$t('请输入商品数量') },
                { key: 'number_unit', text: this.$t('请选择数量单位') },
                { key: 'goods_weight', text: this.$t('请输入商品总重量') },
                { key: 'goods_volume', text: this.$t('请输入商品总体积') },
                { key: 'goods_size', text: this.$t('请输入单件尺寸') },
                { key: 'mode', text: this.$t('请选择运输方式') },
                { key: 'car_category_name', text: this.$t('请选择车型') },
                { key: 'whole_diffuse', text: this.$t('请选择整车/散货') },
                { key: 'desire_speed', text: this.$t('请输入期望速度') },
                { key: 'price_unit', text: this.$t('请选择货币类型') },
                { key: 'freight_price', text: this.$t('请输入运费总价') },
                { key: 'give_install_date', text: this.$t('请选择发货时间') },
                { key: 'content', text: this.$t('请输入商品介绍') },
            ],
        };
    },
    onLoad () {
        this.$u.api.basic.getRussiaReleaseNum().then(res => {
            this.getRuss = res.show
        })
    },
    onShow () {
        this.getLang()
        // 单位
        this.getUnitList()
    },
    methods: {
        // 返回上一页
        handeleTo () {
            uni.navigateBack()
        },
        //验证表单  根据数据 this.model 对象内变量的注释生成验证
        checkForm () {
            // 必填项
            for (const key of this.required) {
                if (!this.model[key.key]) {
                    this.$u.toast(this.$t(`请输入${this.$t(key.text)}`))
                    return false
                }
            }
            return true
        },
        select_goods (e) {
            console.log('select_goods:', e);
            this.model = {
                ...e,
                images: e.buy_images.split(',')
            }
        },
        // 车型
        handeleCarType ({ name, id }) {
            this.model.car_category_id = id
        },
        // 整车/散货
        handeleWhole (e) {
            this.model.whole_diffuse = e
        },
        // 运输方式
        handeleTransport ({ name, value }) {
            this.model.mode = name
            this.model.release_transport = value
        },
        countryChangeStart (e) {
            this.model.departure_country = e.text
        },
        countryChangeEnd (e) {
            this.model.reach_country = e
        },
        // 出发城市
        citySelectCbStart (e) {
            if (this.lang == 'zh') {
                this.model.departure_city = [e.column1, e.column2, e.column3].map(item => ({
                    label: item.label,
                    label_ru: item.label_ru,
                    value: item.value
                }))
                this.model.departure_city_name = e.column1.label + ',' + e.column2.label + ',' + e.column3.label

            } else {
                this.model.departure_city = [e.column1, e.column2, e.column3].map(item => ({
                    label: item.label,
                    label_ru: item.label_ru,
                    value: item.value
                }))
                this.model.departure_city_name = e.column1.label_ru + ',' + e.column2.label_ru + ',' + e.column3.label_ru

            }
        },
        // 到达城市
        citySelectCbEnd (e) {
            if (this.lang == 'zh') {
                this.model.reach_city = [e.column1, e.column2, e.column3].map(item => ({
                    label: item.label,
                    label_ru: item.label_ru,
                    value: item.value
                }))
                this.model.reach_city_name = e.column1.label + ',' + e.column2.label + ',' + e.column3.label
            } else {
                this.model.reach_city = [e.column1, e.column2, e.column3].map(item => ({
                    label: item.label,
                    label_ru: item.label_ru,
                    value: item.value
                }))
                this.model.reach_city_name = e.column1.label_ru + ',' + e.column2.label_ru + ',' + e.column3.label_ru

            }
        },
        duplication () {
            this.mask = !this.mask
        },
        cation () {
            this.getRuss = false
            this.mask = !this.mask
            uni.setClipboardData({
                data: 'www.gluz.com.cn', //当前点击的地址
                success: () => {
                    this.$u.toast('Подтверждаю.')
                }
            })
        },
        //确认有货求车竞标
        submit () {
            if (this.subDisabled) {
                return;
            }
            if (!this.checkForm()) {
                return
            }
            if (this.getRuss && this.lang == 'ru') {
                return this.duplication()
            }
            this.subDisabled = true// 整理附件上传格式
            const mapToUrlObject = arr => arr.map(item => ({ url: item }));
            let params = {
                ...this.model,
                main_order_id: 0,
                transport_type: 0,
                type: '2',
                images: mapToUrlObject(this.model.images),
                goods_l: this.model.goods_size.split('*')[0],
                goods_w: this.model.goods_size.split('*')[1],
                goods_h: this.model.goods_size.split('*')[2],
                departure_country: this.model.departure_country === this.$t('中国') ? '0' : '1',
            }
            delete params.goods_size
            delete params.departure_city_name
            delete params.reach_city_name
            this.$u.api.release.saveTransport(params).then(res => {
            }).then(res => {
                uni.hideLoading();
                this.$u.toast(this.$t('发布成功，请等待后台审核'))
                setTimeout(() => {
                    this.$u.route({
                        url: '/pages/tabbar/user/index',
                        type: 'switchTab'
                    })
                    this.subDisabled = false
                }, 1000)
            }).catch(err => {
                this.$u.toast(this.$t('提交失败'))
            })
        },
        bindDateChange (e) {
            this.model.give_install_date = e.target.value
        },
        //商品分类一级控制显示和隐藏
        handeleGoodsClass (i) {
            if (i == 1) { } else if (i == 2) { } else if (i == 3) {
                this.showCurrency = true
            } else if (i == 4) {
                this.showUnits = true
            }
        },
        // 商品分类返回值
        handeleConfirm (event, param) {
            if (param == 1) { //一级分类
            } else if (param == 2) { //二级分类
            } else if (param == 3) { //货币类型
                const { name, name_ru } = this.currencyTypes[event[0]]
                this.model.price_unit = this.lang == 'zh' ? name : name_ru
            } else if (param == 4) { //数量单位
                this.model.number_unit = this.quantityUnits[event[0]].name
            }
        },
        // 单位
        getUnitList () {
            this.$u.api.basic.getUnitList().then(res => {
                this.quantityUnits = res
            })
        },
        getLang () {
            // 获取缓存lang当前语言值
            uni.getStorage({
                key: 'lang',
                success: res => {
                    if (res.data == 'zh') { //zh为中国，赋值0
                        this.lang = 'zh'
                    } else { //其他为俄罗斯，赋值1
                        this.lang = 'ru'
                    }
                }
            });
        },
    }
}
</script>

<style lang="less" scoped>
.addCk {
    margin-top: 30rpx;
    width: 100%;
    height: 110rpx;
    background-color: #F1F2F4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;

    .addCk-but {
        flex: 1;
        height: 90rpx;
        border-radius: 90rpx;
        background: linear-gradient(180deg, #30F998 0%, #0D7DE2 98%);
        color: #FFFFFF;
        font-size: 28rpx;
        text-align: center;
        line-height: 90rpx;
        margin: 0 20rpx;

        &.prev {
            background: transparent;
            border: 2rpx solid #0F80E0;
            color: #0F80E0;
        }
    }
}

.wuliu {
    background-color: #F1F2F4;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 100%;
    overflow: auto;
    .search-header {
        z-index: 2;
        width: 690rpx;
        min-height: 133rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 40rpx;
    }
    .wuliuContent {
        width: 690rpx;
        position: relative;
        padding: 20rpx 0;
        z-index: 2;

        .new-block2 {
            width: 100%;
            min-height: 160rpx;
            color: #1D1D1D;
            font-size: 24rpx;
        }

        .new-block1 {
            font-weight: normal;
            font-size: 24rpx;
            width: 100%;
            min-height: 60rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #1D1D1D;
            border-bottom: 1rpx solid #D8D8D8;

            &.borderNone {
                border: none;
            }
        }

        .entry-block {
            z-index: 2;
            width: 690rpx;
            min-height: 1160rpx;
            border-radius: 32rpx;
            background: #FFFFFF;
            margin-top: 24rpx;
            padding: 15rpx 30rpx 50rpx 30rpx;
            box-sizing: border-box;
        }
    }
}
</style>